---
order: 4.19
category: '@threlte/extras'
sourcePath: 'packages/extras/src/lib/components/SoftShadows/SoftShadows.svelte'
title: '<SoftShadows>'
type: 'component'
componentSignature:
  {
    props:
      [
        {
          name: 'size',
          type: 'number',
          default: '25',
          description: 'Size of the light source – the larger the softer the light',
          required: false
        },
        {
          name: 'focus',
          type: 'number',
          default: '0',
          description: 'Depth focus, use it to shift the focal point (where the shadow is the sharpest)',
          required: false
        },
        {
          name: 'samples',
          type: 'number',
          default: '10',
          description: 'Number of samples (more samples less noise but more expensive)',
          required: false
        }
      ]
  }
---

This component is a port of the component [`<SoftShadows>` from drei](https://github.com/pmndrs/drei/blob/master/src/core/softShadows.tsx).

It injects Percentage-Closer Soft Shadows (PCSS) into Three.js' shader chunk. Mounting and unmounting this component will lead to all shaders being be re-compiled, although it will only cause overhead if `<SoftShadows>` is mounted after the scene has already rendered, if it mounts with everything else in your scene shaders will compile naturally.

<Example path="extras/soft-shadows" />
